appDisplay: Fix app folder icon subicon spacing

The code previously was using CSS to define row/column spacing and
padding which was combined with a subicon size computed in code relative
to the requested icon size.

In smaller icon sizes it was possible for the CSS spacing+padding + the
size of the two subicons to exceed the requested icon size. This then
would lead to the label being pushed down for app folders compared to
other icons.

Another more severe issue caused by this would happen if the first item
in an icon grid was an app folder. Then the calculation for the maximum
allowed icon size could be off, leading to all icons in the grid
becoming smaller than actually necessary.

This commit changes this to use homogeneous row and column layouts to
evenly distribute the remaining spacing instead of using a fixed CSS
value.

Fixes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3069

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1581>

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index ba7c52174fedbe7494a18979f7aad6303b80b46f..13eb926839d481b7a3c970123eeac84284ca2487 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -89,13 +89,6 @@ $app_grid_fg_color: #fff;
   height: 620px;
 }
 
-.app-folder-icon {
-  padding: $base_padding;
-  spacing-rows: $base_spacing;
-  spacing-columns: $base_spacing;
-}
-
-
 // Running app indicator (also shown in dash)
 .app-well-app-running-dot {
   height: 5px;

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index a80fb773bec2d78eeaf050be08718b8c47acf554..61a563843ddd1afca94111096f4a36f901b00438 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1830,13 +1830,16 @@ class FolderView extends BaseAppView {
     }
 
     createFolderIcon(size) {
-        let layout = new Clutter.GridLayout();
+        const layout = new Clutter.GridLayout({
+            row_homogeneous: true,
+            column_homogeneous: true,
+        });
         let icon = new St.Widget({
             layout_manager: layout,
-            style_class: 'app-folder-icon',
             x_align: Clutter.ActorAlign.CENTER,
+            style: 'width: %dpx; height: %dpx;'.format(size, size),
         });
-        layout.hookup_style(icon);
+
         let subSize = Math.floor(FOLDER_SUBICON_FRACTION * size);
 
         let numItems = this._orderedItems.length;